<template>
  <div>
    <div style="width:100%;display:flex">
      <el-card class="card1" style="width:25%">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="使用单位" label-width="80px">
            <el-input v-model="form.useOrgName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style="margin-left:30px">
            <el-button type="primary" @click="getuseData" size="small">查询</el-button>
            <el-button @click="onSubmit" size="small">导出</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="card1" style="width:75%;margin-left:15px">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="设备注册代码" label-width="100px">
            <el-input v-model="form.eleCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="救援编号" label-width="100px">
            <el-input v-model="form.num963333" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设备状态" label-width="100px">
            <el-select v-model="form.eleStatus" placeholder="请选择" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left:30px">
            <el-button type="primary" @click="geteleData(useOrgId)" size="small">查询</el-button>
            <el-button @click="onSubmit" size="small">导出</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div style="display:flex;margin-top:15px">
      <el-card class="card2">
        <div slot="header" class="clearfix">
          <span>使用单位列表</span>
        </div>
        <div class="text">
          <el-table :data="userData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @row-click="Getrowclick">
            <el-table-column label="单位" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type='text'>
                  {{scope.row.orgName}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="maintEleTotal" label="梯数" width="60">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="usehandleSizeChange" @current-change="usehandleCurrentChange" :current-page.sync="usepagination.pageNum"
            :page-size="usepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="usepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
      <el-card class="card3">
        <div slot="header" class="clearfix">
          <span>电梯信息列表</span> <span style="color:red;margin-left:5%">选择需要认脱的电梯</span>
          <el-button style="float: right" type="danger" @click="eleRentuo" size="small">认脱电梯</el-button>
        </div>
        <div class="text">
          <el-table :data="eleData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="设备注册代码" fixed width="190">
              <template slot-scope="scope">
                <el-button type='text' @click="showDetail(scope.row.eleCode)">
                  {{scope.row.eleCode}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="eleStatus" label="设备状态" fixed width="90">
            </el-table-column>
            <el-table-column prop="num963333" label="救援编号" fixed width="120">
            </el-table-column>
            <el-table-column prop="manufacturer" label="制造单位" width="200">
            </el-table-column>
            <el-table-column prop="regionName" label="维保站点名称" width="120">
            </el-table-column>
            <el-table-column prop="workerFirstName" label="维保人员" width="120">
            </el-table-column>
            <el-table-column prop="workerFirstPhonenumber" label="电话" width="120">
            </el-table-column>
            <el-table-column prop="useOrgName" label="使用单位" width="230">
            </el-table-column>
            <el-table-column prop="eleUseCommunity" label="设备详细地址" width="120">
            </el-table-column>
            <el-table-column prop="eleUseInnerno" label="内部编号" width="120">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="elehandleSizeChange" @current-change="elehandleCurrentChange" :current-page.sync="elepagination.pageNum"
            :page-size="elepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="elepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <LeftDetails ref="LeftDetails" />
  </div>
</template>

<script>
import { getselectUnderwritingListUseOrg, getselectUnderwritingListEle, getdoRemoveEle } from '@/api/elevator'
import LeftDetails from './components/leftdetails.vue'
export default {
  components: {
    LeftDetails
  },
  data () {
    return {
      options: [
        {
          value: '0',
          label: '正常'
        },
        {
          value: '1',
          label: '应检'
        }, {
          value: '2',
          label: '检验'
        }, {
          value: '3',
          label: '超期'
        },
        {
          value: '4',
          label: '待复查'
        }, {
          value: '5',
          label: '报停'
        },
        {
          value: '6',
          label: '封停'
        }, {
          value: '7',
          label: '报废'
        },
        {
          value: '8',
          label: '转卖'
        },
        {
          value: '9',
          label: '延期'
        },
        {
          value: '10',
          label: '监察'
        }
      ],
      usepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      elepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      userData: [],
      eleData: [

      ],
      form: {

      },
      multipleSelection: [],
      useOrgId: '',
      formLabelWidth: '100px',
    }
  },
  mounted () {
    this.getuseData()
  },
  methods: {
    // 电梯认脱
    eleRentuo () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认认脱电梯?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.eleCode
          })
          const params = {
            eleCodeList: query
          }
          getdoRemoveEle(params).then(res => {
            if (res.data.code == '200') {
              this.getuseData()
              this.$message({
                type: 'success',
                message: '认脱成功!'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消认脱'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    //获取使用单位分页数据
    getuseData () {
      const query = {
        useOrgName: this.form.useOrgName,
        pageNum: this.usepagination.pageNum,
        pageSize: this.usepagination.pageSize,
      }
      getselectUnderwritingListUseOrg(query).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.userData = res.data.data.useOrgInfoResponse.page.list
          this.usepagination.pageTotal = res.data.data.useOrgInfoResponse.page.total
          this.useOrgId = this.userData[0].useOrgId
          this.geteleData(this.useOrgId)
        }
      })
    },
    //获取电梯分页数据
    geteleData (useOrgId) {
      const query = {
        useOrgId: useOrgId,
        eleCode: this.form.eleCode,
        eleStatus: this.form.eleStatus,
        factoryNo: this.form.factoryNo,
        num963333: this.form.num963333,
        pageNum: this.elepagination.pageNum,
        pageSize: this.elepagination.pageSize,
      }
      getselectUnderwritingListEle(query).then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.eleData = res.data.data.eleInfoPageResponse.list
          this.elepagination.pageTotal = res.data.data.eleInfoPageResponse.total
        }
      })
    },
    // 点击使用单位列表
    Getrowclick (val) {
      this.useOrgId = val.useOrgId
      this.geteleData(this.useOrgId)
    },
    // 点击显示详情选项卡
    showDetail (eleCode) {
      this.$refs.LeftDetails.dialogVisible1 = true
      this.$refs.LeftDetails.eleCode = eleCode
      this.$refs.LeftDetails.getPageData()
    },
    onSubmit () {

    },
    usehandleSizeChange (val) {
      this.usepagination.pageNum = 1
      this.usepagination.pageSize = val
      this.getuseData()
    },
    usehandleCurrentChange (val) {
      this.usepagination.pageNum = val
      this.getuseData()
    },
    elehandleSizeChange (val) {
      this.elepagination.pageNum = 1
      this.elepagination.pageSize = val
      this.geteleData(this.useOrgId)
    },
    elehandleCurrentChange (val) {
      this.elepagination.pageNum = val
      this.geteleData(this.useOrgId)
    },
  }
}

</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;
  text-align: right;
}
.card1 {
  ::v-deep .el-input__inner {
    width: 180px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
.clearfix {
  font-weight: 800;
}
.card2 {
  width: 25%;
}
.card3 {
  margin-left: 15px;
  width: 75%;
  .text {
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    ::v-deep .el-table__fixed::before {
      height: 0px;
    }
  }
}
</style>
